* {
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #eee;
}

.container {
    display: flex;
}

.container .btn {
    /* 溢出隐藏 */
    overflow: hidden;
    height: 90px;
    width: 90px;
    /* 相对定位 */
    position: relative;
    background-color: #fff;
    border-radius: 25px;
    margin: 0 10px;
    text-align:center;
    /* line-height: 90px; */
    box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 1);
    
}

.container .fa {
    font-size: 38px;
    /* 缩放0.8倍 */
    transform: scale(0.8);
    /* 设置行高 */
    /* 为啥在上面设置行高不行，不会居中 */
    line-height: 90px;
    
    width: 90px;
    transition: all 0.4s cubic-bezier(0.31,-0.1,0.43,1.59);
}

.container .btn::before {
    content:"";
    position: absolute;
    top: 90%;
    left: -110%;
    height: 120%;
    width: 120%;
    /* 顺时针旋转45° */
    transform: rotate(45deg);
    transition: all 0.4s cubic-bezier(0.31,-0.1,0.43,1.59);
}

.container .btn .fa-facebook {
    color: #3b5988;
}

.container .btn_facebook::before {
    background-color: #3b5988;
    
}

.container .btn .fa-twitter {
    color:#00aff0;
}

.container .btn_twitter::before {
    background-color: #00aff0;
}

.container .btn .fa-google {
    color:#dc4a38;
}

.container .btn_google::before {
    background-color: #dc4a38;
}

.container .btn .fa-instagram {
    color:#bf00ff;
}

.container .btn_instagram::before {
    background-color: #bf00ff;
}

.container .btn .fa-pinterest {
    color: #c00;
}

.container .btn_pinterest::before{
    background-color:#c00;
}
/*鼠标移入事件*/
.container .btn:hover::before {
    top: -10%;
    left: -10%;


}

.container .btn .fa:hover {
    color: #fff;
    transform: scale(1);
}